* {
  margin: 0;
  padding: 0;
}
.zoom {
  width: 350px;
  height: 450px;
  margin: 20px 100px;
  border: 1px solid #eee;
}
/* 小图 */
.small-img {
  position: relative;
}
.small-img img {
  width: 350px;
  height: 450px;
  display: block;
  border: none; /*去掉IE低版本蓝色边框*/
}
.small-img .ball {
  width: 150px;
  height: 150px;
  /* background-color: rgba(255, 0, 0, 0.3); */
  background-color: aqua;
  opacity: 0.6;
  filter: alpha(opacity=60); /*兼容IE9以下的版本*/
  cursor: move;
  position: absolute;
  left: 0;
  top: 0;
  display: none;
}
/* 缩略图 */
.thum li {
  list-style: none;
  display: inline-block;
  margin: 15px 6px;
  cursor: pointer;
  border: 2px solid transparent;
}
.thum li.active {
  border: 2px solid red;
}
/* 大图 */
.big-img {
  width: 450px;
  height: 550px;
  position: absolute;
  left: 460px;
  top: 20px;
  overflow: hidden; /*超出部分隐藏*/
}
.big-img img {
  display: block;
  position: absolute;
  /*相对于父级定位,父级必须设置过定位，父级若没定位则相对于(0,0)*/
  left: 0px;
  top: 0px;
  display: none;
}
